<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>迁徙图片</title>
  <style type="text/css">
    body {
      margin: 0;
    }

    #map {
      width: 960px;
      height: 700px;
    }
  </style>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css"
        integrity="sha256-rQq4Fxpq3LlPQ8yP11i6Z2lAo82b6ACDgd35CKyNEBw=" crossorigin="anonymous"/>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"
          integrity="sha256-77IKwU93jwIX7zmgEBfYGHcmeO0Fx2MoWB/ooh9QkBA="
          crossorigin="anonymous"></script>
  <script type="text/javascript" src="../swagger/dist/ol_qx.js"></script>
  <!--<script type="text/javascript" src="../swagger/dist/echarts.js"></script>-->
  <script src="https://cdn.bootcss.com/echarts/3.2.2/echarts.js"></script>

</head>
<body>
<div id="map"></div>
<script>

  var gaodeMapLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
      url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
    })
  });

  var map = new ol.Map({
    target: 'map',
    controls: [],
    loadTilesWhileAnimating: true,
    loadTilesWhileInteracting: true,
    layers: [
      // gaodeMapLayer
    ],
    view: new ol.View({
      projection: 'EPSG:4326',
      center: [122.45, 37.75],
      zoom: 4
    })
  });

  var e3Layer = new ADLayer('e3', getECOption(),map);
  e3Layer.render();

  function getECOption() {
    var cityMap = {
      '北京': [120.17447,30.3234],
      '上海': [121.473658,31.230378],
      '广州': [119.73139,29.96806],
      '大连': [121.618622,38.91459],
      '南宁': [119.291475,29.47828],
      '包头': [109.840405,40.658168],
      '昆明': [102.833722,24.881539],
      '郑州': [120.290273,30.204381],
      '福州': [119.296389,26.074268],
      '太原': [112.549717,37.87046],
      '长春': [120.206085,30.064916],
      '重庆': [106.306838,29.411787],

    };

    var BJData = [
      [{name:'北京'}, {name:'上海', value: 20}],
      [{name:'北京'}, {name:'广州', value: 20}],
      [{name:'北京'}, {name:'大连', value: 20}],
      [{name:'北京'}, {name:'南宁', value: 20}],


    ];

    var SHData = [
      [{name:'上海'},{name:'包头', value: 20}],
      [{name:'上海'},{name:'昆明', value: 20}],
      [{name:'上海'},{name:'广州', value: 20}],
      [{name:'上海'},{name:'郑州', value: 20}],

    ];

    var GZData = [
      [{name:'广州'},{name:'福州', value: 20}],
      [{name:'广州'},{name:'太原', value: 20}],
      [{name:'广州'},{name:'长春', value: 20}],
      [{name:'广州'},{name:'重庆', value: 20}],

    ];

    var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';

    var convertData = function (data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        var fromCoord = cityMap[dataItem[0].name];
        var toCoord = cityMap[dataItem[1].name];
        if (fromCoord && toCoord) {
          res.push({
            fromName: dataItem[0].name,
            toName: dataItem[1].name,
            coords: [fromCoord, toCoord]
          });
        }
      }
      return res;
    };

    var color = ['rgb(120 120 120)', '#ffa032', '#41bee9'];
    var series = [];
    [
      ['北京', BJData], ['上海', SHData], ['广州', GZData]].forEach(
        function (item, i) {
          series.push({
                name: item[0] + ' Top10',
                type: 'lines',
                zlevel: 1,
                effect: {
                  show: true,
                  period: 6,
                  trailLength: 0.7,
                  color: '#fff',
                  symbolSize: 3
                },
                lineStyle: {
                  normal: {
                    color: color[i],
                    width: 0,
                    curveness: 0.2
                  }
                },
                data: convertData(item[1])
              },
              {
                name: item[0] + ' Top10',
                type: 'lines',
                zlevel: 2,
                effect: {
                  show: true,
                  period: 6,
                  trailLength: 0,
                  symbol: planePath,
                  symbolSize: 15
                },
                lineStyle: {
                  normal: {
                    color: color[i],
                    width: 1,
                    opacity: 0.4,
                    curveness: 0.2
                  }
                },
                data: convertData(item[1])
              },
              {
                name: item[0] + ' Top10',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: {
                  brushType: 'stroke'
                },
                label: {
                  normal: {
                    show: true,
                    position: 'right',
                    formatter: '{b}'
                  }
                },
                symbolSize: function (val) {
                  return val[2] / 8;
                },
                itemStyle: {
                  normal: {
                    color: color[i]
                  }
                },
                data: item[1].map(function (dataItem) {
                  return {
                    name: dataItem[1].name,
                    value: cityMap[dataItem[1].name].concat([dataItem[1].value])
                  };
                })
              });
        });

    return {
      tooltip: {
        trigger: 'item'
      },
      series: series
    };
  }
</script>
</body>
</html>
